<template>
    <div class="app-container">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>车辆信息</span>
            </div>
            <div class="vehicle-info">
              <el-form :model="vehicleInfo" label-width="100px">
                <el-form-item label="车牌号">
                  <el-input v-model="vehicleInfo.licensePlate" readonly></el-input>
                </el-form-item>
                <el-form-item label="入库时间">
                  <el-input v-model="vehicleInfo.storageDateTime" readonly></el-input>
                </el-form-item>
                <el-form-item label="出库时间">
                  <el-input v-model="vehicleInfo.deliveryDateTime" readonly></el-input>
                </el-form-item>
                <el-form-item label="金额">
                  <el-input v-model="vehicleInfo.amount" readonly></el-input>
                </el-form-item>
                <el-form-item label="剩余车位">
                  <el-input v-model="remainingSpaces" readonly></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  export default {
    name: 'VehicleInfo',
    data() {
      return {
        vehicleInfo: {
          licensePlate: '',
          storageDateTime: '',
          deliveryDateTime: '',
          amount: ''
        },
        remainingSpaces: 0,
        timer: null
      }
    },
    created() {
      this.getVehicleInfo();
      this.startTimer();
    },
    beforeDestroy() {
      this.stopTimer();
    },
    methods: {
      getVehicleInfo() {
        this.$http.get('/VehicleInfo/getCarNo').then(response => {
          this.vehicleInfo = response.data.data;
       
          this.remainingSpaces = 10; 
        }).catch(error => {
          this.$message.error('获取车辆信息失败');
        });
      },
      startTimer() {
        this.timer = setInterval(() => {
          this.getVehicleInfo();
        }, 2000);
      },
      stopTimer() {
        clearInterval(this.timer);
      }
    }
  }
  </script>
  
  <style scoped>
  .vehicle-info {
    padding: 20px;
  }
  </style>